<template>
  <div class="blog-content-list blog-section card-item">
    <div v-if="blogStore.blogList.length === 0"
         class="blog-content blog-content-empty" >
    </div>

    <div class="blog-content blog-content-summary"
         v-for="(item, index) in blogStore.blogList" :key="index">
      <span class="title">{{ item.title }}</span>

      <blog-label :basic-blog="getBasicBlog(item)"/>

      <p class="content">
        {{ item.summary }}
      </p>

      <el-button type="primary" @click="readBlogClick(index)">阅读全文 »</el-button>
      <hr/>
    </div>

    <el-pagination
        v-model:current-page="blogStore.pageInfo.currentPage"
        :page-size="blogStore.pageInfo.pageSize"
        :total="blogStore.pageInfo.totalSize"
        layout="total, prev, pager, next"
        @current-change="changePageClick"
    />
  </div>
</template>

<script setup lang="ts">
import BlogLabel from '@/components/Content/BlogLabel.vue'
import { useRouter } from 'vue-router'
import { onMounted } from 'vue'
import { useBlogStore } from '@/store/blog.ts'
import { getBasicBlog } from '@/utils/blog/blogUtil.ts'

const router = useRouter()
const blogStore = useBlogStore()

onMounted(async () => {
  await blogStore.queryBlog()
})

/**
 * 点击阅读博客按钮
 * @param index 索引
 */
const readBlogClick = async (index: number) => {
  const blogId = blogStore.blogList[index].id
  await router.push({ name: 'DetailId', params: { id: blogId } })
}

/**
 * 点击切换博客页数按钮
 * @param page 页码
 */
const changePageClick = async (page: number) => {
  blogStore.pageInfo.currentPage = page
  await blogStore.queryBlog()
}
</script>

<style lang="scss">
@use "@/styles/blog/blog.overview.module.scss";
</style>
